<template>
  <div class="app-container">
    <el-row>
      <!-- 树结构 -->
      <el-col :span="6" :xs="24">
        <div class="mainbox-left">
          <div class="box-card">
            <!-- 问题预设 -->
            <problemPresetType @treeClick="handleTreeClick" />
          </div>
        </div>
      </el-col>
      <el-col :span="18" :xs="24" style="padding-left: 0px">
        <div class="none2-border3 userlist mainbox">
          <div class="filter-container">
            <el-form ref="filterFormRef" :inline="true" :model="filterForm"
                     @submit.native.prevent>
              <el-form-item label="问题" prop="problem">
                <el-input v-model.trim="filterForm.problem" placeholder="请输入问题"></el-input>
              </el-form-item>
            </el-form>
            <div class="flex-1" />
            <div>
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </div>
          <dt-table
            v-loading="loading"
            :table-opts="tableOpts"
            :pagination-data="{
              total: total,
              queryParams: filterForm
            }"
            @pagination="getList"
          >
            <template #operatorBtn="scope">
              <el-button
                size="small"
                @click="statusChange(scope.param)"
                v-permission="['PROBLEM_PRESET_STS_BUTTON']"
              >{{ scope.param.problemSts == 1 ? '禁用' : '启用' }}</el-button>
              <el-button
                size="small"
                type="danger"
                v-permission="['PROBLEM_PRESET_DEL_BUTTON']"
                @click="handleDelete(scope.param)"
              >删除</el-button>
            </template>
          </dt-table>
        </div>
      </el-col>
    </el-row>
    <problemFormModal ref="problemFormModal" @success="refresh" />
  </div>
</template>

<script>
import problemPresetType from './components/problemPresetType'
import problemFormModal from './components/problemFormModal'
import { getPage, updateProblemSts, delProblem } from '@/api/problemPreset/index'

export default {
  components: { problemPresetType, problemFormModal },
  dicts: ['upStatus'],
  data() {
    return {
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        problem: ''
      },
      total: 0,
      loading: false,
      classifyId: '',
      classifyCode: '',
      tableOpts: {
        firstTableCol: {
          select: true
        },
        indexTableCol: {
          index: true
        },
        tableData: [],
        rowKey: 'id',
        toolbarBtn: [
          {
            label: '新增',
            permission: ['PROBLEM_PRESET_ADD_BUTTON'],
            type: 'primary',
            icon: 'el-icon-plus',
            click: () => {
              this.handleAdd()
            }
          }
        ],
        // 表头 表格标题
        tableCol: [
          {
            prop: 'problem',
            label: '问题',
            show: true
          },
          {
            prop: 'problemSts',
            label: '问题使用状态',
            show: true,
            width: 140,
            type: 'dict',
            formatter: (row) => { return this.dict.type.upStatus }
          }
        ],
        // 操作表格每一条
        operator: {
          fixed: 'right',
          width: 222,
          operatorBtn: [
            {
              text: '修改',
              size: 'small',
              permission: ['PROBLEM_PRESET_EDIT_BUTTON'],
              click: (row, col, cellValue) => {
                return this.handleUpdate(row)
              }
            }
          ]
        }
      }
    }
  },
  methods: {
    refresh() {
      setTimeout(() => {
        this.getList()
      }, 1000)
    },
    handleUpdate(data) {
      this.$refs.problemFormModal.edit(data)
    },
    handleDelete(data) {
      this.$dtModal.confirm('是否要删除该问题？').then(() => {
        return delProblem(data)
      }).then(() => {
        this.refresh()
        this.$dtModal.msgSuccess('删除成功')
      }).catch(() => { })
    },
    handleAdd() {
      this.$refs.problemFormModal.add({
        classifyId: this.classifyId,
        classifyCode: this.classifyCode
      })
    },
    statusChange(data) {
      updateProblemSts({
        id: data.id,
        classifyId: data.classifyId,
        classifyCode: data.classifyCode,
        problemSts: data.problemSts == '1' ? '2' : '1'
      }).then((res) => {
        this.$dtModal.msgSuccess(res.message)
        this.refresh()
      })
    },
    handleQuery() {
      this.getList()
    },
    handleReset() {
      this.filterForm = {
        pageNo: 1,
        pageSize: 10,
        problem: ''
      }
      this.handleQuery()
    },
    getList() {
      if (!this.classifyCode) {
        return
      }
      this.loading = true
      getPage({
        ...this.filterForm,
        classifyCode: this.classifyCode
      }).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    handleTreeClick(data) {
      this.classifyId = data && data.id
      this.classifyCode = data && data.classifyCode
      this.getList()
    }
  }
}
</script>

<style>

</style>
